Coffee School

Code Editor

// Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Create our player's base entity Crafty.e("2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: 10, h: 10}) // Specifying the dimensions and the point to draw from .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity playerVel += g; // Adds the "gravitational acceleration" to the player's velocity this.y += playerVel; // Change the player entities y position based on the player velocity });

Preview

Console Log:

Task B: Letting the Player “flap”

Goal: Getting user input and changing a variable as a result

Similar to how Crafty has the EnterFrame event, there is an event for a key being pressed KeyDown. Crafty also has a number of other events, some of which we’ll be using later in our game. However, to include the KeyDown event we need to give the entity using it the Keyboard component.

As we did when creating the gravitational behaviour we will extend our player entity with another bind. To do this we place it in our code in this spot:

.bind("EnterFrame", function() {
    // This is where our "gravity" code is
})
// Here we add another binding between the ending ; and the end of the "EnterFrame" bind
.bind("KeyDown", function(event) {
    // We will place our keyboard code here
}); // Remember to move the semicolon!

This bind means that the function declared in it is run whenever a KeyDown event is triggered. When an event is triggered the event object is passed to it, which allows us to access the key property of the event so that we can check which key was pressed.

To check the key pressed we will write an if statement within the KeyDown events function block. So to check if the key pressed was the space bar we would place the following into the function block:

.bind("KeyDown", function(event) {
    // Where we place our code
    if(event.key == Crafty.keys.SPACE) {
        // Game logic goes here
    }
});

This code checks if the event passed to the function has the value of the spacebar for it’s key property.

To complete the jumping ability of the player we need to make the input do something! Try setting the variable playerVel to -5 inside the if statement.

Once you’ve added in your input try it out by hitting the “update” button. If it falls too fast to try it out have a go at changing the value of g!

But what happens if you keep hitting the space bar? The player can go above the game screen! This will become a problem when we have our objects because then the player can fly over the top of them. To stop this from happening we can check for out player’s position in our gravity behaviour and change the player velocity to prevent going above the game:

.bind("EnterFrame", function() {
  // We want to replace our original gravity behaviour with some conditional behaviour
  if(this.y < 0){
    // If the player is above the screen then set their velocity to our gravity value
    playerVel= g;
  }
  // If the player isn't at the ceiling then have normal gravity behaviour
  else {
    playerVel += g;
  }

  this.y += playerVel;
})
.bind("KeyDown", function(event) {
  // Our jumping control
});